import React,{useState,useEffect} from 'react'
import { ShoppingCartOutlined } from '@ant-design/icons';
import { Menu , Badge} from 'antd';
import {Outlet, useNavigate} from 'react-router-dom'
import '../App1.css'
import axios from '../utils/request'


const items =(count)=> [
    {
      label: '首页',
      key: '/shou',
    },
    {
      label: '结算页面',
      key: '/car',
    },
    {
      label: <Badge count={count}>
                <ShoppingCartOutlined style={{ fontSize: '20px' }}/>
              </Badge>,
    }
  ];

  const App = () => {
    const [count,setCount]=useState([])
    const getList=async()=>{
      const res=await axios.get('http://localhost:3000/car')
      setCount(res.data.length)
    }
    useEffect(()=>{
    getList() 
    },[])

    const [current, setCurrent] = useState('/shou');
    const nav=useNavigate()
    const onClick = e => {
      nav(e.key)
      setCurrent(e.key)
    };
    return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items(count)} />;
  };
export default function Home() {
  return (
    <div>
        <div>
        <App></App>
        </div>
        <Outlet></Outlet>
    </div>
  )
}
